<template>
  <div class="revise">
    <my-header>
      <div class="header-box">
        <router-link to="/my">
          <div class="jiantou"></div>
        </router-link>
        <span>修改密码</span>
      </div>
      
    </my-header>
    <div class="passWord-box">
        <input type="password" v-model="opsd" placeholder="请输入原密码" />
        <input type="password" v-model="npsd" placeholder="请输入新密码" />
        <input type="password" v-model="npsd2" placeholder="再次输入新密码" />
      </div>
      <button @click="revise">确认修改</button>
  </div>
</template>
<script>
import MyHeader from "../components/MyHeader.vue";
import { mapState } from "vuex";
import axios from "axios";

// 局部
import Vue from "vue";
import { Dialog } from "vant";
import { baseURL } from '../http/require';
// 全局注册
Vue.use(Dialog);
export default {
  components: { MyHeader, [Dialog.Component.name]: Dialog.Component },
  data() {
    return {
      opsd: "",
      npsd: "",
      npsd2: ""
    };
  },
  watch: {
    user: {
      deep: true,
      immediate: true,
      handler(n, o) {
        // console.log({ n });
      }
    }
  },
  methods: {
    revise() {
      let id = this.user.id;
      if (this.opsd != this.npsd) {
        if (this.npsd == this.npsd2) {
          axios
            .post(
              `${baseURL}/user/updataPassWord`,
              { id: id, passWord: this.npsd },
              {
                headers: "application/x-www-form-urlencoded"
              }
            )
            .then(response => {
              console.log(response);
              if (response.data.code == 200) {
                Dialog.confirm({
                  title: "提示",
                  message: "你确定修改密码吗？"
                })
                  .then(() => {
                    Dialog.alert({
                      title: "提示",
                      message: "请重新登录！！！"
                    }).then(() => {
                      this.$router.push({ name: "login" });
                    });
                  })
                  .catch(() => {
                    return;
                  });
              }
            });
        }
      }
    }
  },
  computed: {
    ...mapState(["user"])
  },
  created() {
    this.revise();
  }
};
</script>
<style lang="scss" scoped>
@import "../css/reset.css";
.revise {
  width: 100%;
  .header-box {
    width: 100%;
    display: flex;
    align-items: center;
    .jiantou {
      flex-grow: 1;
      width: 15px;
      height: 15px;
      border-left: 3px solid #fff;
      border-top: 3px solid #fff;
      transform: rotate(320deg);
      margin-left: 15px;
    }
    span {
      flex-grow: 1;
    }
  }
  .passWord-box {
    width: 100%;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    input {
      width: 90%;
      height: 40px;
      border-radius: 20px;
      margin: 15px auto;
      padding-left: 10px;
      border: 1px solid #ccc;
      font-size: 14px;
      outline: none;
      color: #000;
    }
  }
  button {
    width: 100%;
    height: 60px;
    background-color: #faca2a;
    border: 0;
  }
}
</style>